<template>
  <div class="service">
    <div class="min-container">
      <client-title title="助力企业数字升级的上云服务" class="content-title" />
      <div class="content">
        <div v-for="(item, index) in dataList" class="item" :key="index">
          <div class="contenInfo">
            <el-image style="width: 150px; height: 150px" :src="cloud" fit="fill" />
            <div class="titleName">{{ item.name }}</div>
            <p>{{ item.intro }}</p>
            <ul>
              <li v-for="(subItem, key) in item.list" :key="key">
                <div>
                  <el-icon>
                    <Check color="#4098FF" />
                  </el-icon>
                </div>
                <span>{{ subItem.name }}</span>
              </li>
              <li class="more">了解详情</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ClientTitle from "@/components/client-title/client-title.vue";
import { getAssetURL } from "@/utils/load_assets";
const cloud = getAssetURL("client/home/content/cloud.png");
const dataList = ref<any>([
  {
    name: "云商业平台",
    intro: "帮助企业具备多云统一运营能力",
    list: [
      { name: "基于LTC销售管理流程，端到端运营" },
      { name: "异构 XaaS 数字化整合，统一品牌，自主定价" },
      { name: "帮助渠道快速接入，提供渠道结算和集团分账" },
    ],
  },
  {
    name: "CloudEasy CMP 云管理平台",
    intro: "实现企业混合云&多云高效管理",
    list: [
      { name: "产品架构完善，支持多云接入" },
      { name: "多云资源整合管理、运行状态统一监控" },
      { name: "智能运维提升管理能力，智慧运营降低成本" },
    ],
  },
  {
    name: "CloudEasy CMS 云管理服务",
    intro: "满足企业全栈云管理和运维需求",
    list: [
      { name: "7X24小时技术支持，快速高效" },
      { name: "提供数据库、中间件服务及费用优化服务" },
      { name: "多种套餐定制，具备强大的服务平台和资源保障" },
    ],
  },
]);
</script>
<style lang="less" scoped>
.service {
  .content-title {
    margin-bottom: 30px;
  }

  .content {
    display: flex;
    .item {
      flex: 1;
      margin-right: 12px;
      &:last-child {
        margin-right: 0;
      }
      .contenInfo {
        font-size: 14px;
        border-radius: 4px;
        border: 3px solid #fff;
        padding: 20px 30px;
        position: relative;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          scale: 1.01;
          border: 3px solid rgb(242, 253, 255);
          .more {
            color: #fff;
            background-color: #409eff;
          }
        }
      }

      .el-image {
        position: absolute;
        right: 10px;
        top: 0;
      }
      p {
        color: #909090;
        font-family: PingFang SC;
        margin-top: 20px;
      }
      ul {
        li {
          display: flex;
          margin-top: 20px;
          span {
            margin-left: 10px;
            position: relative;
          }
        }
        .more {
          display: flex;
          justify-content: center;
          padding: 0px 20px;
          color: #4098ff;
          transition: all 0.3s;
          border: 1px solid #4098ff;
          padding: 10px 20px;
          width: 100%;
        }
      }
    }
  }
}
</style>
